<template>
  <div class="flow-icon task_icon task_txt" :style="showData.style">
    <div class="x6-html-node" :class="nodeStatus" @click="click">
      <div v-if="!showData.editting">{{ showData.alias ? showData.alias : '请输入内容' }}</div>
      <div v-else class="input-box">
        <a-textarea ref="txtNodeIpt" v-model.trim="showData.alias" :max-length="400" placeholder="请输入内容" @blur="onBlur" />
      </div>
    </div>
  </div>
</template>

<script>
import nodeIconMixin from '../../../mixins/nodeIcon';

export default {
  // eslint-disable-next-line vue/no-reserved-component-names
  name: 'Text',
  components: {},
  mixins: [nodeIconMixin],
  watch: {
    'showData.editting': {
      // deep: true,
      handler(val) {
        this.$nextTick(() => {
          if (!window.nodeEditting && val) {
            // 防止小地图内缩略图获得焦点
            window.nodeEditting = true;
            this.$refs.txtNodeIpt.focus();
          }
        });
      }
    }
  },
  methods: {
    onBlur() {
      this.showData.editting = false;
      window.nodeEditting = false;
    }
  }
};
</script>
<style lang="less" scoped>
@base-font-size: 12px;
:deep(.input-box) {
  width: 100%;
  height: 100%;
  position: relative;
  .ant-input-affix-wrapper {
    height: 100%;
  }
  textarea {
    height: 100%;
    width: 100%;
    outline: 0;
    resize: none;
    padding: 0;
    border: 0;
    line-height: 18px;
    padding-right: 0px;
    font-size: @base-font-size;
    &:not([disabled]):focus {
      box-shadow: none;
    }
  }
  textarea::-webkit-input-placeholder {
    color: #c1c1c1;
  }
  textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #c1c1c1;
  }
  textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #c1c1c1;
  }
  textarea:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #c1c1c1;
  }
  .input_text {
    display: inline-block;
    position: absolute;
    right: 5px;
    bottom: 0;
    color: #8e8e8e;
  }
  .avic-textarea-count {
    right: 0;
    bottom: 0;
    .avic-textarea-num {
      background: #ffffff61;
    }
  }
}
</style>
